<template>
  <div class="icon-box">
    <el-input
      ref="inputRef"
      v-model="model"
      v-bind="$attrs"
      :placeholder="placeholder"
      :clearable="clearable"
      @clear="clearIcon"
      @click="openDialog"
    >
      <template #append>
        <my-icon :icon="model" />
      </template>
    </el-input>
    <el-dialog v-model="dialogVisible" :title="placeholder" top="50px" width="66%">
      <el-input v-model="inputValue" placeholder="搜索图标" size="large" prefix-icon="Search" />
      <el-scrollbar>
        <div class="icon-list">
          <div v-for="item in iconList" :key="item" class="icon-item" @click="selectIcon(item)">
            <y size="36px" :icon="item" />
            <span>{{ item.replace('icon-', '') }}</span>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="MyIconSelect">
import { ref, computed } from 'vue'

import { getIconList } from '@/utils/tool'

const props = withDefaults(
  defineProps<{
    title?: string
    clearable?: boolean
    placeholder?: string
  }>(),
  {
    title: '请选择图标',
    clearable: true,
    placeholder: '请选择图标',
  }
)

const model = defineModel<string>()

// open Dialog
const dialogVisible = ref(false)
const openDialog = () => (dialogVisible.value = true)

const selectIcon = (item: any) => {
  dialogVisible.value = false
  model.value = item
  setTimeout(() => inputRef.value.blur(), 0)
}

// 清空图标
const inputRef = ref()
const clearIcon = () => {
  model.value = ''
  setTimeout(() => inputRef.value.blur(), 0)
}

// 监听搜索框值
const inputValue = ref('')
const customIcons = getIconList()
const iconList = computed(() => {
  if (!inputValue.value) {
    return getIconList()
  }
  let result: { [key: number]: string } = {}
  customIcons.forEach((item, index) => {
    if (item.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) {
      result[index] = customIcons[index]
    }
  })
  return result
})
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
